import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Button, Table, Tag, Modal, Form, Input  } from 'antd'

import styles from './Article.less'
import { observer, inject } from 'mobx-react'
import { runInAction, toJS } from 'mobx'
import { getArticleList } from './ArticleServ.js'

const E = require('wangeditor') 


@withRouter
@inject('article')
@observer
class ArticleList extends Component {
	constructor(props) {
		super(props)
		this.article = this.props.article
	}
 
	componentDidMount() {	
 		this.article.doGetArticleList()
  }

  color = ['#f50', '#2db7f5', '#87d068', '108ee9']

  columns = [
		{
		  title: '索引',
		  key: '1',
		  width: 100,
		  fixed: 'left',
		 	render: (text, record, index) => {
		 		return (
					<span>{index + 1}</span>
		 		)
		 	}
		},
		{
		  title: 'ID',
		  width: 230,
		  dataIndex: '_id',
		  key: '_id',
		}, 
		{
		  title: '文章标题',
		  width: 200,
		  dataIndex: 'articleTitle',
		  key: 'articleTitle',
		  render: (text, record, index) => {
		  return <span style={{fontSize: '14px', fontWeight: '600'}}>{text}</span>
		  }
		},
		{
		  title: '创建时间',
		  width: 200,
		  dataIndex: 'articleTime',
		  key: 'articleTime'
		},
		{
		  title: '标签',
		  width: 200,
		  dataIndex: 'articleTag',
		  key: 'articleTag',
		  render: (text, record,index) => {
		  	return (
					<div>
						{text.map((item, index) => {
							return <Tag key={item} style={{marginRight: 10}} color={this.color[index]}>{item}</Tag>
						})}
					</div>
		  	)
		  }
		},
		{
		  title: '文章摘要',
		  width: 400,
		  dataIndex: 'articleDesc',
		  key: 'articleDesc'
		},
		{
			title: '操作',
			width: 200,
			key: 'action',
			fixed: 'right',
			render: (text, record, index) => {
				return (
					<div>
						<a style={{marginRight: 15}} onClick={() => {this.props.history.push('/articleMgmt/articleCreate?type=detail&id=' + record._id)}}>查看</a>
						<a style={{marginRight: 15}} onClick={() => {this.props.history.push('/articleMgmt/articleCreate?type=edit&id=' + record._id)}}>编辑</a>
						<a onClick={() => {
							this.article.doDeleteArticle({id: record._id})
						}}>删除</a>
					</div>
				)
			} 
		}
  ]

	render() {

		return (
			<div className="box" style={{overflow: "hidden"}}>
				<div className="shadow"></div>
				<div className="header">
					<h3 className="title">博客列表</h3>
					<Button className="add" type="primary" onClick={() => {this.props.history.push('/articleMgmt/articleCreate?type=create')}}>新增文章</Button>
				</div>
				<Table rowKey='_id' bordered={true} columns={this.columns} dataSource={this.article.articleList} scroll={{x: 1400}} ></Table>
				{this.article.articleList.map(item => {})}
			</div>
		)
	}
}

export default ArticleList